
import React from 'react';
import { StyleSheet } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useSelector } from 'react-redux';
import TopTabBarWrapper from '@/pages/views/TopTabBarWrapper';
import Home from '@/pages/home';
import { createHomeModel } from '@/config/dva';

const Tab = createMaterialTopTabNavigator()

const mapStateToProps = ({ category }) => {
    return category.myCategorys;
};

function HomeTabs() {
    const myCategorys = useSelector(mapStateToProps);
    const renderTabBar = (props) => {
        return <TopTabBarWrapper {...props} />;
    };

    const renderScreen = (item) => {
        createHomeModel(item.id);
        return (
            <Tab.Screen
                key={item.id}
                name={item.id}
                component={Home}
                options={{ tabBarLabel: item.name }}
                initialParams={{
                    namespace: item.id,
                }}
            />
        );
    };

    return (
        <Tab.Navigator
            lazy
            tabBar={renderTabBar}
            pager={props => <ViewPagerAdapter {...props} />}
            sceneContainerStyle={styles.sceneContainer}
            tabBarOptions={{
                scrollEnabled: true,
                tabStyle: {
                    width: 80,
                    padding: 0,
                },
                indicatorStyle: {
                    height: 4,
                    width: 20,
                    marginLeft: 30,
                    borderRadius: 2,
                    backgroundColor: '#f86442',
                },
                activeTintColor: '#f86442',
                inactiveTintColor: '#333',
            }}>
            {myCategorys.map(renderScreen)}
        </Tab.Navigator>
    );
}


const styles = StyleSheet.create({
    sceneContainer: {
        backgroundColor: 'transparent',
    },
});

export default HomeTabs